<template>
  <el-space direction="vertical" alignment="flex-start" size="default">
    <el-space>
      <el-button type="default" @click="fetchMenuList">刷新</el-button>
      <el-button type="primary" @click="onAdd">新增</el-button>
      <el-button
        type="danger"
        :disabled="state.selectionIds.length === 0"
        @click="handleDel(state.selectionIds)"
      >
        删除
      </el-button>
    </el-space>

    <el-table
      row-key="id"
      border
      height="500"
      :data="state.list"
      @selection-change="onSelectChange"
    >
      <el-table-column type="selection" />
      <el-table-column label="名称" prop="name" width="200" fixed />
      <el-table-column label="图标" prop="icon" align="center" width="80">
        <template #default="{ row }">
          <el-icon v-if="row.icon" size="24" color="#000">
            <component :is="row.icon" />
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column label="类型" prop="type" align="center" width="100">
        <template #default="{ row }">
          <el-tag type="success" v-if="row.type === 0">目录</el-tag>
          <el-tag type="warning" v-else-if="row.type === 1">菜单</el-tag>
          <el-tag type="danger" v-else>按钮</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="节点路由" prop="router" />
      <el-table-column label="路由缓存" align="center" width="100">
        <template #default="{ row }">
          <el-icon v-if="row.type === 1 && row.keepAlive"><Check /></el-icon>
        </template>
      </el-table-column>
      <el-table-column label="文件路径" prop="viewPath" />
      <el-table-column label="权限" prop="perms" />
      <el-table-column label="更新时间" width="180">
        <template #default="{ row }">
          <span>{{ dayjs(row.updateTime).format('YYYY年MM月DD日') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="排序号" prop="orderNum" align="center" width="80" />
      <el-table-column fixed="right" label="操作" width="300">
        <template #default="{ row }">
          <el-button type="primary">新增</el-button>
          <el-button type="default" @click="onEdit(row)">编辑</el-button>
          <el-button type="danger" @click="handleDel([row.id])">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <DialogAdd ref="myDialog" :menu-list="state.list" @success="fetchMenuList" />
  </el-space>
</template>

<script lang="ts" setup>
import { getMenuList, delMenuList } from '@/api/menu'
import { reactive, ref, onMounted } from 'vue'
import { listToTree } from '@/utils'
import dayjs from 'dayjs'
import { ElMessageBox } from 'element-plus'
import DialogAdd from './dialog-add.vue'

const state = reactive({
  // 表格数据
  list: [] as IMenu[],
  // 当前勾选的Id集合
  selectionIds: [] as number[]
})

async function fetchMenuList() {
  const { data } = await getMenuList()
  state.list = listToTree(data, null)
}

function onSelectChange(selection: IMenu[]) {
  console.log('onSelect', selection)
  state.selectionIds = selection.map((item) => item.id)
}

// 删除
async function handleDel(ids: number[]) {
  // 二次确认弹窗
  await ElMessageBox.confirm('此操作将永久删除选中数据，是否继续？', '提示', {
    // 更多配置
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
  await delMenuList({ ids: ids })
  // 删除成功，重新获取数据
  fetchMenuList()
}

const myDialog = ref<InstanceType<typeof DialogAdd> | null>(null)
// 新增
function onAdd() {
  // 直接调用 DialogAdd 组件 暴露的 open 方法
  myDialog.value?.open()
}
// 编辑
function onEdit(menu: IMenu) {
  // 直接调用 DialogAdd 组件 暴露的 open 方法
  myDialog.value?.open(menu)
}

onMounted(() => {
  fetchMenuList()
})
</script>
